<template>
    <div class="HyperBoxList">
        <div class="HotListCon-list">
            <div class="HotListCon-left">
                <img src="image/HotList/HotList-list-1.png" alt="">
            </div>
            <div class="HotListCon-right">
                <h3>枝纯蓝莓125g (14mm+)清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸</h3>
                <div class="HotListCon-right-span">
                    <span>来自湖北潜江,稻田养殖,清水白嫖</span>
                </div>
                <div class="HotListCon-right-hot">
                    <van-tag type="danger">每满98.4元减10.4元</van-tag>
                </div>
                <div class="HotListCon-right-1">
                    <div class="HotListCon-right-left">
                        <p><span class="HotListCon-right-left-money">￥</span>5.5<span>/盒</span></p>
                    </div>
                    <div class="HotListCon-right-right">
                        <van-button type="primary" color="#ea4237" round size="mini">马上抢</van-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="HotListCon-list">
            <div class="HotListCon-left">
                <img src="image/HotList/HotList-list-1.png" alt="">
            </div>
            <div class="HotListCon-right">
                <h3>枝纯蓝莓125g (14mm+)清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸</h3>
                <div class="HotListCon-right-span">
                    <span>来自湖北潜江,稻田养殖,清水白嫖</span>
                </div>
                <div class="HotListCon-right-hot">
                    <van-tag type="danger">每满98.4元减10.4元</van-tag>
                </div>
                <div class="HotListCon-right-1">
                    <div class="HotListCon-right-left">
                        <p><span class="HotListCon-right-left-money">￥</span>5.5<span>/盒</span></p>
                    </div>
                    <div class="HotListCon-right-right">
                        <van-button type="primary" color="#ea4237" round size="mini" @click="fun()">
                            马上抢
                        </van-button>
                    </div>
                </div>
            </div>
        </div>
<!--        <van-sku-->
<!--            v-model="show"-->
<!--            :sku="sku"-->
<!--            :goods="goods"-->
<!--            :goods-id="goodsId"-->
<!--            :quota="quota"-->
<!--            :quota-used="quotaUsed"-->
<!--            :hide-stock="sku.hide_stock"-->
<!--            :message-config="messageConfig"-->
<!--            @buy-clicked="onBuyClicked"-->
<!--            @add-cart="onAddCartClicked"-->
<!--        />-->
    </div>
</template>

<script>
export default {
    name: "HyperBoxList",
    data(){
        return{
            bool:false
        }
    },
    methods:{
        fun(){
            // this.bool
        }
    }
}
</script>

<style scoped>
.HotListCon-right-span span{
    color: #999;
}
.HotListCon-list{
    margin-top: .14rem;
    background-color: #fefefe;
}
.HotListCon-right-left{
    display: flex;
    align-items: center;
}
.HotListCon-right-left p{
    font-size: .17rem;
    font-weight: bold;
    color: #e93340;
}
.HotListCon-right-left p span{
    font-size: .12rem;
    font-weight: normal;
    color: #bababa;
}
.HotListCon-right-left p .HotListCon-right-left-money{
    font-size: .12rem;
    font-weight: bold;
    color: #e93340;
}
.HotListCon-right-hot{
    margin-top:.06rem;
    margin-bottom:.12rem;
}
.HotListCon-right-right button{
    padding: 0 .10rem;
    vertical-align: bottom;
}
.HotListCon-right-hot .van-tag{
    line-height: .21rem;
}
.HotListCon-right h3{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: .28rem;
    line-height: .28rem;
    font-size: .15rem;
}
.HotListCon-right{
    width: 100%;
}
.HotListCon-right-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.HotListCon-right{
    width: 70%;
    padding: 0 .13rem;
}
.HotListCon-left{
    width: 30%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.HotListCon-left img{
    width: 1.09rem;
    height: 1.09rem;
    object-fit: cover;
    display: block;
    text-align: right;

}
.HotListCon-list{
    display: flex;
}
</style>